<template>
  <van-popup
      v-model:show="visible"
      :class="type"
      :overlay="false"
      :style="{ width: '90%', top: '20px' }"
      class="custom-message"
      position="top"
  >
    <div class="message-content">
      <van-icon :name="iconName" class="message-icon"/>
      <span class="message-text">{{ message }}</span>
    </div>
  </van-popup>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {Icon as VanIcon, Popup as VanPopup} from "vant";

const props = defineProps({
  type: {
    type: String,
    default: "info",
  },
  message: {
    type: String,
    required: true,
  },
  duration: {
    type: Number,
    default: 3000,
  },
});

const visible = ref(false);

const iconName = computed(() => {
  switch (props.type) {
    case "success":
      return "success";
    case "warning":
      return "warning-o";
    case "error":
      return "cross";
    default:
      return "info-o";
  }
});

onMounted(() => {
  visible.value = true;
  if (props.duration > 0) {
    setTimeout(() => {
      visible.value = false;
    }, props.duration);
  }
});
</script>

<style lang="less" scoped>
.custom-message {
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  transition: all 0.3s;

  &.success {
    background-color: #f0f9eb;
    color: #67c23a;
    border: 1px solid #e1f3d8;
  }

  &.warning {
    background-color: #fdf6ec;
    color: #e6a23c;
    border: 1px solid #faecd8;
  }

  &.error {
    background-color: #fef0f0;
    color: #f56c6c;
    border: 1px solid #fde2e2;
  }

  &.info {
    background-color: #f4f4f5;
    color: #909399;
    border: 1px solid #e9e9eb;
  }

  .message-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .message-icon {
    font-size: 16px;
  }

  .message-text {
    font-size: 14px;
    line-height: 1.4;
  }
}
</style>
